<template>
  <div class="message-detail">
    <!-- 查看机构对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="openDataScope"
      width="700px"
      append-to-body
      custom-class="dialog-box"
    >
      <el-descriptions
        class="margin-top"
        :column="1"
        border
        :labelStyle="labelStyle"
      >
        <el-descriptions-item>
          <template slot="label"> 标题 </template>
          {{ dialogForm.noticeTitle }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 时间 </template>
          {{ dialogForm.createTime }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 内容 </template>
          {{ dialogForm.noticeContent }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template slot="label"> 附件 </template>
          <a
            class="download"
            v-if="dialogForm.noticeFileUrl"
            :href="dialogForm.noticeFileUrl"
            :download="dialogForm.noticeFileName"
            >{{ dialogForm.noticeFileName }}</a
          >
        </el-descriptions-item>
      </el-descriptions>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelDataScope">关 闭</el-button>
        <!-- <el-button type="primary" @click="cancelDataScope">确 定</el-button> -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "messageDetail",
  props: {
    dialogForm: {
      type: Object,
      default() {
        return {};
      },
    },
    title: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      openDataScope: false,
      labelStyle: {
        width: "180px",
      },
    };
  },
  methods: {
    cancelDataScope() {
      this.openDataScope = false;
      this.$emit("handleSurnBtn");
    },
  },
};
</script>

<style lang="scss" scoped>
/* 弹出窗样式 */
.el-dialog__wrapper {
  ::v-deep .dialog-box {
    .download {
      color: blue;
    }
    .el-dialog__body {
      padding: 24px 69px 24px 69px;
      border-top: 1px solid #ebecef;
      border-bottom: 1px solid #ebecef;
      label {
        font-weight: 400 !important;
      }
    }
    .el-dialog__footer {
      padding: 16px 20px;
    }
    .el-dialog__headerbtn {
      background: url("../../../assets/images/icon_dialog_close.png");
      background-size: 100%;
      width: 16px;
      height: 16px;
      .el-dialog__close {
        visibility: hidden;
      }
    }
  }
}
</style>
